<template>
    <el-row>
        <el-row class="erp_header">
          <el-col :span="18" :offset="2" class="title">优悦家装ERP系统</el-col>
          <el-col :span="4">
            <el-row>
              <el-col class="userPortrait" :span="5"><img :src="avata" alt=""></el-col>
              <el-col :span="18" :offset="1">
                <el-dropdown size="small" split-button type="primary" class="userInfo">
                  张小小
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><router-link to="/main/PersonalInformation" class="text">个人资料</router-link></el-dropdown-item>
                    <el-dropdown-item class="text"><el-button type="text" @click="dialogVisible = true">修改密码</el-button></el-dropdown-item>
                    <el-dropdown-item><router-link to="/" class="text">退出</router-link></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      <!--修改密码弹窗-->
      <el-dialog title="修改密码" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <el-form ref="changePwdForm" :model="changePwdForm" label-width="110px" :rules="changePwdFormRules">
          <el-form-item label="旧密码：" prop="oldSecretkey" >
            <el-col>
              <el-input v-model="changePwdForm.oldSecretkey" size="small" type="password"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="新密码：" prop="newSecretkey" >
            <el-input v-model="changePwdForm.newSecretkey" size="small" type="password"></el-input>
          </el-form-item>
          <el-form-item label="再次输入密码：" prop="confirmSecretkey">
            <el-input v-model="changePwdForm.confirmSecretkey" size="small" type="password"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="savePassword" size="small">保 存</el-button>
        </span>
      </el-dialog>
    </el-row>
</template>
<script>
  import  axios from  'axios';
    export default {
        data() {
          // 验证两次输入的密码 修改密码
          var validatePassword = (rule, value, callback) => {
            if (value !== this.changePwdForm.newSecretkey) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return {
            dialogVisible: false,
            changePwdForm:{
              oldSecretkey:'',
              newSecretkey:'',
              confirmSecretkey:'',
            },
            changePwdFormRules:{
              oldSecretkey:[
                {required:true,message:"请输入旧密码",trigger:'blur'}
              ],
              newSecretkey:[
                {required:true,message:"请输入新密码",trigger:'blur'}
              ],
              confirmSecretkey:[
                {required:true,message:"请再次输入密码",trigger:'blur'},
                { validator: validatePassword, trigger: 'blur' }
              ],
            }
          }
        },
      methods:{
          //"X关闭弹窗"
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        savePassword(){
          let self = this;
          self.dialogVisible = false;
          self.$refs['changePwdForm'].validate((valide)=>{
            if(valide){
              var url = "/api/account/user/logined/updatePassword"
              // 封装form表单
              var data = new FormData();
              var reqData = {
                oldSecretkey : self.changePwdForm.oldSecretkey.trim(),
                newSecretkey : self.changePwdForm.newSecretkey.trim(),
                confirmSecretkey : self.changePwdForm.confirmSecretkey.trim()
              }
              for(var key in reqData){
                data.append(key,reqData[key])
              }
              // 开始请求
              axios.post(url,data,{
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                  'token':localStorage.getItem("token")
                }
              }).then(function ({data}) {
                if(data.status==true){
                  self.$message.success("保存成功")
                  localStorage.setItem("webWsToken",data.data.webWsToken);
                  localStorage.setItem("name",data.data.name);
                  localStorage.setItem("username",data.data.username);
                  localStorage.setItem("userId",data.data.userId);
                  localStorage.setItem("userId",data.data.companyId);
//                  self.$router.push('/main/client')
                }else{
                  self.$message.error(data.message);
                }
              })
            }
          })
        },
      },
      //计算头像
      computed:{
        avata : function () {
          return "/api/account/avatar?userId="+localStorage.getItem("userId")
        }
      }
    }
</script>
<style scoped>
  .erp_header{
    height: 60px;
    width: 100%;
    background: #2a2f35;
    position: fixed;
    z-index: 20;
    margin: 0;
    padding: 0;
  }
  .title{
    font-size: 25px;
    line-height: 60px;
    color: white;
  }
  .userPortrait>img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid white;
    margin-top: 9px;
  }
  .userInfo{
    margin-top: 14px;
  }
.text{
  color: #777;
  text-decoration: none;
  background-color: white;
}
.VerificationCode{
    text-align: center;
  }
</style>
